<template>
  <div>
    <div class="df">
      <a-button type="plain" @click="toList" class="d-a-center">返回</a-button>
      <a-button
        type="primary"
        @click="addService"
        class="d-a-center"
        style="margin-left: 30px"
        >添加字段</a-button
      >
    </div>

    <!-- 左侧一级分类服务列表 这个要手写？这样位置有点奇怪啊感觉着可以再写一个table表格啊哈-->
    <div class="main">
      <!--右侧二级分类列表 -->
      <div style="flex: 1">
        <a-table
          :columns="childrenColums"
          :data-source="childrenList"
          bordered
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <!-- :scroll="{ y: 540, x: 'auto' }" -->

          <template #service="{ record, index }">
            <div class="service">
              <div
                class="name"
                :class="index == serviceAct ? 'name-act' : ''"
                @click="getChildrenList(record, index)"
              >
                {{ record.name }}
              </div>
              <div class="edit" danger @click="editService(record, 1)">
                <EditTwoTone />
              </div>
              <div class="del" danger @click="delService(record.key)">
                <DeleteTwoTone twoToneColor="#f5222d" />
              </div>
            </div>
          </template>
          <template #imgUrl="{ record }">
            <img
              style="width: 60px; height: 60px"
              :src="record.imgUrl"
              alt=""
            />
          </template>

          <template #operation="{ record }">
            <a-button type="link" @click="editService(record, 0)"
              >编辑</a-button
            >
            <a-button type="link" @click="delService(record.id, 0)">
              删除</a-button
            >
          </template>
        </a-table>
      </div>
    </div>

    <a-modal :visible="visible" :footer="null" width="50%" @cancel="cancel">
      <!-- 新增服务项 -->
      <a-form
        ref="modalRef"
        :rules="rules"
        :model="modalForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <div style="width: 20px; margin-left: 52px; margin-bottom: -40px">
          <text style="color: red; font-size: 19px; font-weight: 500">*</text>
        </div>
        <a-form-item name="sortBasic" label="字段所属">
          <!-- <a-select ref=" select" v-model:value="modalForm.fieldBelong" @focus="focus" @change="handleMyChange"
					placeholder="请选择">
					<a-select-option v-for="item in buyCar1" :value="item.id+''" :key="item.id">{{ item.name }}
					</a-select-option>
					</a-select> -->
          <a-select
            ref="select"
            v-model:value="sortBasic"
            @focus="focus"
            @change="handleMyChange"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in buyCar1"
              :value="item.id + ''"
              :key="item.id"
              >{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="字段名称"
          name="fieldName"
          :rules="[{ required: true, message: '' }]"
        >
          <a-input
            placeholder="请输入字段名称"
            v-model:value="modalForm.fieldName"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="字段英文名"
          name="englishFieldName"
          :rules="[{ required: true, message: '' }]"
        >
          <a-input
            placeholder="请输入字段英文名"
            v-model:value="modalForm.englishFieldName"
          ></a-input>
        </a-form-item>
        <!-- modalForm.fieldType -->
        <div style="width: 20px; margin-left: 52px; margin-bottom: -40px">
          <text style="color: red; font-size: 19px; font-weight: 500">*</text>
        </div>
        <a-form-item name="sortInfo" label="字段类型">
          <a-select
            ref="select"
            v-model:value="sortInfo"
            @focus="focus"
            @change="handleChange"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in buyCar2"
              :value="item.id + ''"
              :key="item.id"
              >{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <block v-if="sortInfo == '选择项' || sortInfo == 0">
          <div style="width: 20px; margin-left: 36px; margin-bottom: -40px">
            <text style="color: red; font-size: 19px; font-weight: 500">*</text>
          </div>
          <a-form-item label="配置选择项" name="options">
            <a-button
              class="editable-add-btn d-a-center"
              style="margin-bottom: 8px; margin-top: 10px"
              @click="handleAdd"
            >
              添加选项</a-button
            >
            <div>
              <table class="table" style="margin-bottom: 10px">
                <!-- 添加选项操作 -->
                <tr>
                  <th class="header" v-for="item in columns" :key="item.name">
                    {{ item.title }}
                  </th>
                </tr>
                <tr v-for="(tr, index) in dataSource" :key="index">
                  <!-- 新增选项 -->
                  <template v-if="tr.isEdit" class="edit_class">
                    <td v-for="(i, ind) in columns" :key="ind">
                      <div v-if="ind == 2" style="display: flex">
                        <a
                          style="margin-right: 4px; word-break: keep-all"
                          v-if="tr.isEdit"
                          @click="handleSave"
                          >保存</a
                        >
                        <a
                          style="word-break: keep-all"
                          @click="handleDelete(index)"
                          >取消</a
                        >
                      </div>
                      <input v-else type="text" v-model="obj[i.dataIndex]" />
                    </td>
                  </template>
                  <!-- 查看选项  实现编辑选项和删除选项 -->
                  <template v-else>
                    <td v-for="(i, ind) in columns" :key="ind">
                      <div>{{ tr[i.dataIndex] }}</div>
                      <div v-if="i.dataIndex == 'operation'">
                        <a-popconfirm
                          v-if="dataSource.length"
                          title="确定删除?"
                          @confirm="handleDelete(index)"
                        >
                          <a style="padding-right: 10px">删除</a>
                        </a-popconfirm>
                      </div>
                    </td>
                  </template>
                </tr>
              </table>
            </div>
          </a-form-item>
        </block>

        <!-- <a-form-item label="是否额外补充信息" name="woundType">
          <a-input
            placeholder="请输入默认提示"
            v-model:value="modalForm.woundType"
          ></a-input>
        </a-form-item> -->
        <a-form-item
          label="默认提示"
          name="hintLanguage"
          :rules="[{ required: true, message: '' }]"
        >
          <a-input
            placeholder="请输入默认提示"
            v-model:value="modalForm.hintLanguage"
          ></a-input>
        </a-form-item>
      </a-form>
      <a-divider></a-divider>
      <!-- 确定和取消 -->
      <a-row>
        <a-col :span="4" :offset="6">
          <a-button type="primary" size="large" @click="cancel">关闭</a-button>
        </a-col>
        <a-col :span="4" :offset="2">
          <a-button type="primary" size="large" @click="save">保存</a-button>
        </a-col>
      </a-row>
    </a-modal>
    <!-- 首页二级排序 -->
    <a-modal :visible="sortShow" :footer="null" width="90%" @cancel="cancel1">
      <a-table :columns="sortColums" :data-source="sortList" bordered>
      </a-table>
      <a-row>
        <a-col :span="4" :offset="6">
          <a-button type="primary" size="large" @click="cancel1">关闭</a-button>
        </a-col>
        <a-col :span="4" :offset="2">
          <a-button type="primary" size="large" @click="handleSave"
            >保存</a-button
          >
        </a-col>
      </a-row>
    </a-modal>
  </div>
  <div></div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  created,
  defineComponent,
  createVNode,
  toRefs,
  onMounted,
} from "vue";
import { useRoute } from "vue-router";
import router from "@/router/index.js";
import { FormInstance } from "ant-design-vue";
import { useModal } from "@/hooks"
import {
  CheckOutlined,
  EditOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined,
  ExclamationCircleOutlined,
  EditTwoTone,
  DeleteTwoTone,
  PlusOutlined,
  MinusCircleOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
import { Modal, message, notification } from "ant-design-vue";
import Tinymce from "@/components/common/tinymce/tinymce";
import Tinymce1 from "@/components/common/tinymce/tinymce1";
import * as api from "@/api/service/report.js";
import UploadImage from "@/components/common/UploadImage.vue";
// import { Source } from "webpack-sources";
export default {
  setup() {
    const route = useRoute();
    const serviceAct = ref(0);
    const data = reactive({
      sortShow: false,
      sortList: [],
      // 一级分类的id
      id: 0,
      serviceList: [],
      childrenList: [],
      loading: true, //表格加载
      // headerTitle: "",
      isEdit: "", //编辑or新增
      type: 2, //类型
      visible: false,
      activeKey: "0",
      uploadLoading: false,
      imageUrl: "",
      sortBasic: "基础情况评估",
      sortInfo: "选择项",
      modalForm1: {},
      modalForm: {
        fieldBelong: 1,
        fieldType: 0,
      },
      value: "",
      fileList: [],
      fileList2: [],
      detail: "哈哈哈",
      uploadRef: "",
      flowPop: false,
      columns: [
        {
          title: "名称",
          dataIndex: "name",
          width: "30%",
        },
        {
          title: "值",
          dataIndex: "value",
          width: "30%",
        },

        {
          title: "操作",
          dataIndex: "operation",
        },
      ],
      columnsFlow: [
        {
          title: "服务规范",
          dataIndex: "serveName",
          width: "70%",
        },
        {
          title: "操作",
          dataIndex: "operation",
        },
      ],
      // 工作流程数据
      dataFlow: [
        // {
        //  id:0
        //   name: "服务流程",
        //   operation: "",
        // },
      ],
      dataSource: [],
      obj: {},
      // 修改当前选项的index
      flag: -1,
      serviceDetails: [],
      buyCar1: [
        {
          name: "基础情况评估",
          id: 0,
        },
        {
          name: "专项情况评估",
          id: 1,
        },
      ],
      buyCar2: [
        {
          name: "选择项",
          id: 0,
        },
        {
          name: "输入项",
          id: 1,
        },
        {
          name: "时间格式",
          id: 2,
        },
        {
          name: "血压选择",
          id: 3,
        },
      ],
    });
    const modalRef = ref("");
    const modalRef1 = ref("");
    const editor = ref("");
    const editor1 = ref("");

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });

    onMounted(() => {
      if (route.query.id) {
        data.id = route.query.id;
        initChildrenList();
      } else {
      }
    });
    // 左侧服务分类列表
    const serviceColums = [
      {
        title: "服务名称",
        dataIndex: "name",
        className: "table",
        align: "center",
        slots: {
          customRender: "service",
        },
      },
    ];
    const sortColums = [
      {
        title: "序号",
        dataIndex: "sortId",
        className: "table",
        align: "center",
        // slots: {
        //   customRender: "sort",
        // },
      },
      {
        title: "一级分类",
        dataIndex: "serviceTypeparentName",
        className: "table",
        align: "center",
        // sorter: (a, b) => a.price - b.price,
      },
      {
        title: "二级分类",
        dataIndex: "serviceTypeName",
        className: "table",
        align: "center",
      },
    ];
    const childrenColums = [
      {
        title: "序号",
        dataIndex: "id",
        className: "table",
        align: "center",
        // slots: {
        //   customRender: "sort",
        // },
      },
      {
        title: "字段名称",
        dataIndex: "fieldName",
        className: "table",
        align: "center",
        // sorter: (a, b) => a.price - b.price,
      },
      {
        title: "分类",
        dataIndex: "fieldType",
        className: "table",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      // console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
      initChildrenList();
    };

    const handleSave = () => {
      console.log(data.obj);
      if (!(data.obj && data.obj.name && data.obj.value)) {
        message.error("请输入名称、值");
        return;
      }
      data.dataSource.pop();
      data.dataSource.push({
        name: data.obj.name,
        value: data.obj.value,
        operation: "",
      });

      data.obj = {};
    };
    const handleMyChange = (v) => {
      console.log(v, "vv");
      data.modalForm.fieldType = v == 1 ? "0" : "1";
    };
    // 新增服务
    const addService = () => {
      data.sortBasic = "基础情况评估";
      data.sortInfo = "选择项";
      data.dataSource = [];
      data.modalForm = {};
      data.fileList = [];
      data.visible = true;
      data.isEdit = 2;
    };
    // 编辑服务和服务项目
    const editService = async (item, type) => {
      console.log("编辑服务", item);
      if (item.fieldBelong == 1) {
        data.sortBasic = "专项情况评估";
      } else {
        data.sortBasic = "基础情况评估";
      }
      if (item.fieldType == 0) {
        data.sortInfo = "选择项";
      } else if (item.fieldType == 1) {
        data.sortInfo = "输入项";
      } else if (item.fieldType == 2) {
        data.sortInfo = "时间格式";
      } else if (item.fieldType == 3) {
        data.sortInfo = "血压选择";
      }
      data.isEdit = 1;
      data.modalForm = {
        ...item,
      };
      data.dataSource = JSON.parse(item.choiceType);
      // data.fileList = [{ url: item.imgUrl }];
      data.visible = true;
    };
    async function initServiceDetail(id) {
      let res = await selectServiceById(id);
      if (res.success) {
        return res.object;
      }
    }
    // 删除服务和服务项目
    const delService = (key, type) => {
      const {closeModal} = useModal.confirm({
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode(
            "div",
            {
              style: "color:red;",
            },
            "确定要删除当前字段配置吗"
          ),
        okType: "danger",
        onOk: async () => {
          let res = await api.deleteConfigurationField({
            id: key,
          });
          if (res.success) {
            message.success("删除成功");
            initChildrenList();
            closeModal()
          }
        },
        
        class: "test",
      });
    };
    const delType = (key) => {
      const {closeModal} = useModal.confirm({
        title: () => "确定删除该服务吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode(
            "div",
            {
              style: "",
            },
            "确定要删除所选信息吗？删除后此服务下服务将同时删除"
          ),
        okType: "danger",
        onOk: async () => {
          let res = await deleteType([Number(key)]);
          if (res.success) {
            message.success("删除成功");
            initChildrenList();
            closeModal()
          }
        },

        
        class: "test",
      });
    };

    // 获取服务下的子列表:本来写的一级和二级联动，嗯……然后呢？不动了……我……无语了……
    const getChildrenList = (e, index) => {
      if (serviceAct.value == index) return;
      serviceAct.value = index;
      page.current = 1;
      initChildrenList();
    };


    const headerTitle = computed(() => {
      let title = data.isEdit == 1 ? "编辑" : "新增";
      return title;
    });
    const rules = {
      name: [
        {
          required: true,
          message: "请输入分类名称!",
        },
      ],
    };
    const cancel1 = () => {
      data.sortShow = false;
      data.sortList = [];
      initChildrenList();
    };
    const cancel = () => {
      console.log("点击了关闭");
      //置空
      data.modalForm1 = {};
      data.modalForm = {};
      data.dataSource = [];
      data.dataFlow = [];
      data.visible = false;
    };

    const handleChange = (value) => {
      // if(value==0){
      // }
      // data.modalForm.typeId = value;
    };
    const previewVisible = ref(false);
    const previewImage = ref("");
    const imageUrl = ref("");

    function getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener("load", () => callback(reader.result));
      reader.readAsDataURL(img);
    }
    const handleCancel = () => {
      previewVisible.value = false;
    };

    const handlePreview = async (file) => {
      // console.log(file, "上传图片这是");
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
    };

    const handleChange1 = (info) => {
      if (info.file.status === "uploading") {
        data.uploadLoading = true;
        return;
      }

      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url) => {
          data.imageUrl = base64Url;
          data.uploadLoading = false;
        });
      }

      if (info.file.status === "error") {
        data.uploadLoading = false;
        message.error("上传错误");
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/psd" ||
        file.type === "image/bmp" ||
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpeg";

      if (!isJpgOrPng) {
        message.error("图片格式不正确!");
      }
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isLt2M) {
        message.error("图片大小不超过5MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    // 富文本内容
    const tinymceInput = (value) => {
      console.log(value, "服务简介");
      data.modalForm.detail = value;
    };
    const tinymceInput1 = (value) => {
      // console.log(value, "预约须知");
      data.modalForm.notice = value;
    };

    // 保存,根据tab的绑定的key值判断编辑服务项目还是类别
    const save = () => {
      // console.log("data.modalForm", data.modalForm);

      let ref = data.activeKey == "0" ? modalRef : modalRef1;

      ref.value
        .validate()
        .then(async () => {
          // console.log("表单内容", data.modalForm);
          data.modalForm.configurationId = data.id;
          data.modalForm.choiceType = JSON.stringify([...data.dataSource]);
          // 替换值（基础专项id和输入类型id）
          // console.log('情况评估', data.sortBasic)
          // console.log('输入类型', data.sortInfo)
          if (data.sortBasic == "基础情况评估" || data.sortBasic == 0) {
            data.modalForm.fieldBelong = 0;
          } else {
            data.modalForm.fieldBelong = 1;
          }
          if (data.sortInfo == 0 || data.sortInfo == "选择项") {
            console.log("选择判断");
            let optionStatus = data.dataSource.every((some) => {
              if (some.name != "" && some.value != "") {
                return true;
              }
            });
            console.log("选择判断true为正确", optionStatus);
            if (data.modalForm.choiceType != "[]" && optionStatus) {
              data.modalForm.fieldType = 0;
              updateInfo(data.modalForm);
            } else {
              message.error("请正确填写选项内容！");
            }
          }
          // else {
          // 	message.error('提交失败111')
          // }
          if (data.sortInfo == 1 || data.sortInfo == "输入项") {
            data.modalForm.fieldType = 1;
            updateInfo(data.modalForm);
          } else if (data.sortInfo == 2 || data.sortInfo == "时间格式") {
            data.modalForm.fieldType = 2;
            updateInfo(data.modalForm);
          } else if (data.sortInfo == 3 || data.sortInfo == "血压选择") {
            data.modalForm.fieldType = 3;
            updateInfo(data.modalForm);
          }
          // else {
          // 	message.error('提交失败')
          // }
          // 关闭弹窗
          // emit('closeModal')
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    async function updateInfo(value) {
      let res = await api.insertConfigurationField({
        ...value,
      });
      if (res.success) {
        message.success("操作成功");
        data.visible = false;
        value = {};
        initChildrenList();
      }
    }
    // 初始化服务列表
    async function initChildrenList() {
      console.log("00000000000000000");
      let obj = {
        configurationId: data.id,
      };
      let res = await api.selectConfigurationFieldByConfigId(obj);
      if (res.success) {
        console.log("服务111111111111111111");
        res.object.map((el) => (el.key = el.id));
        let arr = res.object.filter((f) => f.isDele != 1);
        // data.serviceList = res.object.records;
        data.childrenList = [...arr];
        // page.total = res.object.total;
        data.loading = false;
        // initChildrenList(res.object.records[0].id);
      }
    }
    // 二级列表
    async function initChildrenLis() {
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
      };
      // let res = await api.serviceTypeParentList(obj);
      // if (res.success) {
      //   res.object.records.map((el) => (el.key = el.id));
      //   data.childrenList = res.object.records;
      //   page.total = res.object.total;
      //   data.loading = false;
      // }
    }
    const closeFlowPop = () => {
      data.flowPop = false;
      formRef.value.resetFields();
      dynamicValidateForm.serveName = "";
      dynamicValidateForm.users = [];
      dynamicValidateForm.id = [];
      dynamicValidateForm.isEdit = false;
    };
    const toList = () => {
      router.back();
    };
    const methods = {
      handleFlowPop() {
        data.flowPop = true;
      },
      handleAdd() {
        let idEdit = data.dataSource.some((i) => i.isEdit);
        if (idEdit) return;
        const newData = {
          key: ``,
          name: ``,
          value: "",
          operation: "",
          isEdit: true,
        };
        data.dataSource.push(newData);
      },
      handleEdit(ind) {
        data.flag = ind;
        // data.dataSource = data.dataSource.map(i => i.isEdit=false)
        data.dataSource[ind].isEdit = true;
        data.obj = {
          ...data.dataSource[ind],
          isEdit: true,
        };
      },
      handleDelete(ind) {
        data.dataSource.splice(ind, 1);
      },
      handleDeleteDataFlow(i) {
        data.dataFlow.splice(i, 1);
      },
    };
    // 工作流程
    const formRef = ref();
    const dynamicValidateForm = reactive({
      serveName: "",
      users: [],
      id: Date.now(),
    });
    const handleEditFlow = (item, index) => {
      debugger;
      console.log(data.dataFlow[index], "00000000");
      dynamicValidateForm.isEdit = true;
      dynamicValidateForm.serveName = item.serveName;
      dynamicValidateForm.id = item.id;
      dynamicValidateForm.users = JSON.parse(item.users);

      data.flowPop = true;
    };
    const removeService = (index) => {
      // let index = data.serviceDetail.indexOf(item);
      // if (index !== -1) {
      data.serviceDetails.splice(index, 1);
    };
    const removeUser = (item) => {
      let index = dynamicValidateForm.users.indexOf(item);
      // if (index !== -1) {
      dynamicValidateForm.users.splice(index, 1);
      // }
    };
    const addServiceDetail = () => {
      console.log(
        data.serviceDetails,
        "res.serviceDetailsres.serviceDetails-----"
      );

      data.serviceDetails.push({
        serviceDetailTitle: "",
        serviceDetail: "",
      });
    };
    const addUser = () => {
      dynamicValidateForm.users.push({
        first: "",
        last: "",
        id: Date.now(),
      });
      console.log(dynamicValidateForm.users, "-------");
    };
    const onFinish = (values) => {
      if (dynamicValidateForm.users.length == 0) {
        message.error("请至少输入一条规范详情");
        return;
      }
      debugger;
      if (dynamicValidateForm.isEdit) {
        data.dataFlow = data.dataFlow.map((d) => {
          if (d.id == dynamicValidateForm.id) {
            return {
              id: dynamicValidateForm.id,
              serveName: dynamicValidateForm.serveName,
              users: JSON.stringify(dynamicValidateForm.users),
            };
          }
          return d;
        });
      } else {
        data.dataFlow.push({
          id: dynamicValidateForm.id,
          serveName: dynamicValidateForm.serveName,
          users: JSON.stringify(dynamicValidateForm.users),
        });
      }
      console.log("Received values of form:", {
        ...dynamicValidateForm,
      });
      console.log("dynamicValidateForm.users:", dynamicValidateForm);
      closeFlowPop();
    };
    return {
      formRef,
      dynamicValidateForm,
      onFinish,
      removeUser,
      addUser,
      toList,
      ...toRefs(data),
      ...methods,
      childrenColums,
      sortColums,
      pagination,
      serviceAct,
      serviceColums,
      handleSave,
      addService,
      delService,
      editService,
      getChildrenList,
      handleTableChange,
      handleMyChange,
      modalRef,
      imageUrl,
      labelCol: {
        style: {
          width: "150px",
          padding: "4px 10px",
          fontWeight: "bold",
        },
      },
      wrapperCol: {
        span: 12,
      },
      previewVisible,
      previewImage,
      rules,
      modalRef1,
      tinymceInput1,
      tinymceInput,
      handleCancel,
      handlePreview,
      handleChange,
      handleChange1,
      beforeUpload,
      save,
      cancel,
      cancel1,
      headerTitle,
      delType,
      editor,
      editor1,
      closeFlowPop,
      handleEditFlow,
      addServiceDetail,
      removeService,
    };
  },

  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    EditTwoTone,
    DeleteTwoTone,
    ArrowUpOutlined,
    ArrowDownOutlined,
    PlusOutlined,
    LoadingOutlined,
    Tinymce,
    Tinymce1,
    UploadImage,
    MinusCircleOutlined,
  },
};
</script>

<style scoped lang="less">
.flex {
  display: flex;
  align-items: center;
}

.main {
  display: flex;
  margin-top: 30px;
}

.ant-upload-text {
  padding: 40px;
  display: flex;
}

.service {
  display: flex;
  justify-content: space-between;

  // 服务激活样式
  .name-act {
    color: #2a9d8f;
    font-weight: bolder;
  }

  .edit {
    padding: 0px 5px;
  }
}

.process {
  display: flex;

  .process-list {
    margin-right: 20px;
    display: flex;
    flex-direction: column;

    .num {
      width: 50px;
      height: 50px;
      border: solid 1px #999;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .img {
      width: 50px;
      height: 50px;
      background-color: tomato;
      margin: 10px 0px;
    }

    .title {
    }
  }
}

.table {
  width: 100%;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;

  tr {
    td {
      input {
        border: 1px solid #aaa !important;
        width: 97% !important;
      }
    }

    th,
    td {
      text-align: center;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
  }
}

.myhtml {
  width: 160%;
  height: 140%;
  padding: 8rpx 6rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
}

.flowWrap {
  .f_item {
    padding: 20px 0 !important;
  }

  .left {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 22px;
    margin-right: 30px;

    .spot {
      color: red;
    }
  }
}

.ant-form-item {
  margin-bottom: 0px;
}
</style>
